<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <el-form
        v-model="searchForm"
        size="mini"
        label-width="80px"
        inline
        class="margin-top flex justify-between"
      >
        <el-form-item>
          <div slot="label">选择月份：</div>
          <el-date-picker
            v-model="searchForm.month"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <div slot="label">搜索月份：</div>
          <el-input
            v-model="searchForm.searchMonth"
            placeholder="请输入月份"
            clearable
          ></el-input>
        </el-form-item>

        <el-button size="mini" type="primary" @click="statistics">
          统计
        </el-button>
      </el-form>
    </el-card>

    <el-card class="margin-top" v-if="showTable">
      <div slot="header" class="clearfix">
        <span>近{{ latelyMonth }}月未发货客户</span>
      </div>
      <el-table :data="tableData" style="width: 100%" class="text-sm">
        <el-table-column prop="no" label="序号"></el-table-column>
        <el-table-column prop="saleName" label="销售"> </el-table-column>
        <el-table-column prop="customerNameShort" label="客户简称">
        </el-table-column>
        <el-table-column prop="days" label="未发货(天数)"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";
import PieChart from "./components/PieChart";
export default {
  components: {
    PieChart
  },
  data() {
    return {
      loading: false,
      showTable: false,
      latelyMonth: "",
      searchForm: {
        searchMonth: "",
        month: ""
      },
      tableData: []
    };
  },
  mounted() {},
  methods: {
    // 请求数据
    async statistics() {
      this.loading = true;
      this.showTable = true;
      this.latelyMonth = this.searchForm.searchMonth;
      const res = await ajax("countCustomerMonthNotDeliver", {
        month: this.searchForm.month,
        searchMonth: this.searchForm.searchMonth
      });
      console.log(res);
      if (res.code === 200) {
        this.tableData = res.data;
      } else {
        this.$message.error(m(res.message));
      }
      this.loading = false;
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-table--mini td,
.el-table--mini th {
  padding: 2px 0;
}
</style>
